<template>
	<div class="mine-team-list-wrap">
		<van-nav-bar title="团队粉丝" left-arrow fixed @click-left="onClickLeft" />

		<img v-if="!searchShow" class="filter-icon" @click="showPopup = true"
			src="../../images/mine/team-filter-icon.png">
		<img v-if="!searchShow" class="search-icon" @click="searchShow = true"
			src="../../images/mine/team-search-icon.png">

		<div class="tab-box">
			<van-tabs v-model="current" title-inactive-color="#666666" title-active-color="#F32A23" @change="changeTab">
				<van-tab title="全部"></van-tab>
				<van-tab title="今日"></van-tab>
				<van-tab title="昨日"></van-tab>
				<van-tab title="近7天"></van-tab>
				<van-tab title="近30天"></van-tab>
			</van-tabs>
		</div>


		<!-- 搜索框 -->
		<div v-if="searchShow" class="search-input">
			<van-search v-model="searchValue" autofocus :clearable="false" placeholder="请输入昵称或手机号查询" @search="onSearch"
				:left-icon="searchHistoryIcon">
			</van-search>
		</div>
		<div v-if="searchShow" class="cancel-text" @click="searchShow = false">取消</div>


		<van-list v-model="loadingPage" :finished="finished" :finished-text="list.length ? '没有更多了' : ''"
			@load="ajaxGoodList">

			<div v-if="finished && !list.length" class="empty-good">
				<van-empty description="暂无粉丝" />
			</div>

			<!-- 商品列表 -->
			<div class="team-ul">
				<div v-for="(item, index) in list" :key="index" class="team-li">
					<img class="team-li-icon" :src="item.avatar_url || headIcon">
					<div class="team-li-desc">
						<div class="team-li-name">
							{{ item.nickname }}
						</div>
						<div class="team-li-phone">手机号：{{ item.account }}</div>
						<div class="team-li-desc-price">
							<span style="margin-right: 0.24rem;">消费金额：{{ item.consume_total }}</span>
							<span>团队人数：{{ item.team_count }}</span>
						</div>

						<img v-if="item.level_icon" class="level-icon" :src="item.level_icon">
					</div>
				</div>
			</div>

		</van-list>


		<!-- 弹窗 -->
		<van-popup v-model="showPopup" round position="bottom" safe-area-inset-bottom>
			<div class="filter-box">
				<div class="filter-box-title">高级筛选</div>
				<div class="filter-fensi-title">
					粉丝等级
				</div>
				<div class="level-ul">
					<div @click="handleToLeve(-1)" :class="['level-li', level == -1 ? 'on' : '']">不限</div>
					<div @click="handleToLeve(0)" :class="['level-li', level == 0 ? 'on' : '']">达人</div>
					<div @click="handleToLeve(1)" :class="['level-li', level == 1 ? 'on' : '']">经理</div>
					<div @click="handleToLeve(2)" :class="['level-li', level == 2 ? 'on' : '']">创客</div>
					<div @click="handleToLeve(3)" :class="['level-li', level == 3 ? 'on' : '']">合伙人</div>
					<div @click="handleToLeve(20)" :class="['level-li', level == 20 ? 'on' : '']">商家</div>
				</div>

				<div style="margin-top: 0.12rem;" class="filter-fensi-title">
					粉丝纬度
				</div>
				<div class="level-ul">
					<div @click="handleToTieLeve(1)" :class="['level-li', tier_level == 1 ? 'on' : '']">直属粉丝</div>
					<div @click="handleToTieLeve(2)" :class="['level-li', tier_level == 2 ? 'on' : '']">二代粉丝</div>
					<div @click="handleToTieLeve(3)" :class="['level-li', tier_level == 3 ? 'on' : '']">二代后粉丝</div>
				</div>

				<div class="save-btn" @click="handleToSave">确定</div>
			</div>
		</van-popup>



	</div>
</template>

<script>
import {
	FANS_LIST
} from "@/api/mine";
import { searchHistoryIcon } from '@/tool/static-img';
export default {
	data() {
		return {
			searchHistoryIcon,
			current: 0,
			searchValue: '',
			headIcon: require('@/images/mine/head.png'),

			// 筛选
			showPopup: false,
			level: -1,
			tier_level: 0,
			searchShow: false,

			// 分页
			page: 1,
			pageSize: 20,
			list: [],
			loadingPage: false,
			finished: false,
		}
	},
	created() {
		const name = this.$route.query.name;
		if (name == 'today') {
			this.current = 1;
		} else if (name == 'yesterday') {
			this.current = 2;
		} else if (name == 'week') {
			this.current = 3;
		} else if (name == 'month') {
			this.current = 4;
		}

	},
	methods: {
		resetInit() { //重置
			this.page = 1;
			this.list = [];
			this.finished = false;

			this.loadingPage = true;
			this.ajaxGoodList()
		},
		onClickLeft() {
			this.$router.back();
		},
		changeTab(index) {
			this.current = index;

			this.resetInit();
		},
		// 关键词去搜索
		onSearch(val) {

			this.resetInit();
		},
		handleToLeve(index) {
			this.level = index;
		},
		handleToTieLeve(index) {
			if (this.tier_level == index) {
				this.tier_level = 0;
			} else {
				this.tier_level = index;
			}
		},
		handleToSave() {
			this.showPopup = false;
			this.resetInit();
		},
		// 列表
		ajaxGoodList() {
			let params = {};
			params['page_num'] = this.page;
			params['page_size'] = this.pageSize;
			params['type'] = this.current;

			params['level'] = this.level;
			params['tier_level'] = this.tier_level;

			if (this.searchValue && this.searchValue.trim()) {
				params['keyword'] = this.searchValue.trim();
			}

			this.$http.get(FANS_LIST, {
				params
			})
				.then(res => {
					const {
						list
					} = res.data;

					if (list && list.length) {
						this.page++;
						this.list = this.list.concat(list);
						// 加载状态结束
						this.loadingPage = false;
						if (list.length < this.pageSize) {
							this.finished = true;
						}
					} else {
						this.finished = true;
					}
				})


		}
	}

}
</script>

<style lang="scss">
.mine-team-list-wrap {
	position: relative;
	min-height: 100vh;
	padding-top: 46px;
	padding-bottom: 1rem;
	background-color: #F5F5F5;
	box-sizing: border-box;

	.van-nav-bar .van-icon {
		color: #333333;
	}

	.van-nav-bar__arrow {
		font-size: 20px;
	}

	.van-hairline--bottom::after {
		display: none;
	}

	.filter-icon {
		position: fixed;
		right: 1.12rem;
		top: 0.22rem;
		z-index: 10;
		width: 0.48rem;
		height: 0.48rem;
	}

	.search-icon {
		position: fixed;
		width: 0.48rem;
		height: 0.48rem;
		right: 0.32rem;
		top: 0.22rem;
		z-index: 10;
	}

	.tab-box {
		height: 0.88rem;

		.van-tab--active {
			font-size: 16px;
		}

		.empty-good {
			padding-top: 1rem;
		}

	}

	.team-ul {
		padding: 0.2rem 0.24rem 0;

		.team-li {
			position: relative;
			display: flex;
			align-items: center;
			width: 7.02rem;
			height: 1.32rem;
			padding: 0.28rem 0.32rem;
			margin-bottom: 0.16rem;
			border-radius: 0.16rem;
			box-sizing: border-box;
			background-color: #FFFFFF;

			.level-icon {
				position: absolute;
				top: 0;
				bottom: 0;
				right: 0.36rem;
				margin: auto;
				height: 0.46rem;
			}

			.team-li-icon {
				width: 0.76rem;
				height: 0.76rem;
				border-radius: 50%;
			}

			.team-li-desc {
				margin-left: 0.24rem;

				.team-li-name {
					height: 0.4rem;
					margin-bottom: 0.04rem;
					line-height: 0.4rem;
					font-size: 0.28rem;
					color: #333333;
				}

				.team-li-phone {
					// font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 0.2rem;
					line-height: 0.28rem;
					color: #666666;
					font-style: normal;
				}

				.team-li-desc-price {
					height: 0.28rem;
					line-height: 0.28rem;
					font-size: 0.2rem;
					color: #999999;
				}
			}
		}
	}

	.filter-box {
		padding: 0.32rem 0.34rem 0.24rem;

		.filter-box-title {
			height: 0.44rem;
			margin-bottom: 0.32rem;
			line-height: 0.44rem;
			font-weight: 500;
			font-size: 0.32rem;
			text-align: center;
			color: #333333;
		}

		.filter-fensi-title {
			height: 0.4rem;
			margin-bottom: 0.2rem;
			line-height: 0.4rem;
			font-size: 0.28rem;
			font-weight: 500;
			color: #333333;
		}

		.level-ul {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.level-li {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 2.12rem;
				height: 0.6rem;
				margin-bottom: 0.16rem;
				font-size: 0.24rem;
				font-weight: 400;
				color: #666666;
				background-color: #F2F4F5;
				border: 1px solid #F2F4F5;
				border-radius: 0.08rem;

				&.on {
					border-color: #F32A23;
					background: rgba(243, 42, 35, 0.1);
					color: #F32A23;
				}
			}
		}
	}

	.save-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 6.06rem;
		height: 0.88rem;
		margin: auto;
		margin-top: 0.48rem;
		font-size: 0.32rem;
		font-weight: 500;
		color: #FFFFFF;
		border-radius: 0.44rem;
		background: linear-gradient(135deg, #FF5851 0%, #E9011B 100%);
	}

	.van-search__content {
		border-radius: 0.32rem;
		background-color: #F4F4F4 !important;
	}

	.cancel-text {
		position: fixed;
		top: 7px;
		right: 0.32rem;
		z-index: 10;
		height: 0.64rem;
		line-height: 0.64rem;
		font-size: 0.28rem;
		color: #333333;
	}

	.search-input {
		position: fixed;
		left: 0.9rem;
		top: 7px;
		z-index: 10;
		width: 5.24rem;
		margin-left: 0.24rem;
		border-radius: 0.32rem;
		overflow: hidden;

		.search-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 0.28rem;
			font-weight: 400;
			color: #fff;
			position: absolute;
			right: 0.06rem;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 1.12rem;
			height: 0.52rem;
			border-radius: 0.3rem;
			background: linear-gradient(135deg, #FF5851 0%, #E9011B 100%);
		}

		.van-search {
			padding: 0;
			background-color: #F4F4F4;

			.van-search__content {
				background-color: #fff;
				border-radius: 0.32rem;

				.van-cell {
					align-items: center;
					padding: 3px 3px 3px 0;
				}
			}

			.van-field__control {
				height: 26px;
				width: 3.6rem;
				line-height: 26px;
				font-weight: 400;
				font-size: 0.28rem;
			}

			.van-icon {
				height: 20px;
			}

			.van-icon__image {
				width: 20px;
				height: 20px;
			}
		}
	}
}
</style>
